<template>
    <div>
        <!-- 四个小卡片开始 -->
        <a-row :gutter="16">
            <!-- 总销售额 -->
            <a-col :span="6">
                <a-card :bordered="false">
                    <div style="border-bottom: 1px solid gray">
                        <p>
                            <span>总销售额</span> <span style="margin-left: 78px"><a-icon type="exclamation-circle" /></span>
                        </p>
                        <p style="color: #000; font-size: 23px;line-height: 38px;">￥126,2560</p>

                        <span style="padding: 5px">周同比 12%</span><span style="color: red"><a-icon type="caret-up" /></span>
                        <br>
                        <span style="padding: 5px">日同比 11%</span><span style="color: green"><a-icon
                                type="caret-down" /></span>
                    </div>
                    <p style="padding: 5px">日均销售额 ￥ 234.56</p>
                </a-card>
            </a-col>
            <!-- 订单量 -->
            <a-col :span="6">
                <a-card :bordered="false">
                    <div style="border-bottom: 1px solid gray; ">
                        <p>
                            <span>订单量</span> <span style="margin-left: 78px"><a-icon type="exclamation-circle" /></span>
                        </p>
                        <p style="color: #000; font-size: 23px;line-height: 38px;">8,864</p>
                        <div id="order" style="width: 170px;height:38px; margin-bottom: 5px;"></div>
                    </div>
                    <p style="padding: 5px">日订单量 1234</p>
                </a-card>
            </a-col>
            <!-- 支付笔数 -->
            <a-col :span="6">
                <a-card :bordered="false">
                    <div style="border-bottom: 1px solid gray">
                        <p>
                            <span>支付笔数</span> <span style="margin-left: 78px"><a-icon type="exclamation-circle" /></span>
                        </p>
                        <p style="color: #000; font-size: 23px;line-height: 38px;">6,560</p>
                        <div id="pay" style="width: 170px;height:38px; margin-bottom: 5px;"></div>
                    </div>
                    <p style="padding: 5px">转化率 60%</p>
                </a-card>
            </a-col>
            <!-- 运行活动效果 -->
            <a-col :span="6">
                <a-card :bordered="false">
                    <div style="border-bottom: 1px solid gray">
                        <p>
                            <span>运行活动效果</span> <span style="margin-left: 50px"><a-icon type="exclamation-circle" /></span>
                        </p>
                        <p style="color: #000; font-size: 23px;line-height: 38px;">78%</p>
                        <div style="width: 170px;height:38px; margin-bottom: 5px;">
                            <a-progress :percent="78" size="small" />
                        </div>
                    </div>
                    <span style="padding: 5px">周同比 12%</span><span style="color: red"><a-icon type="caret-up" /></span>
                    <br>
                    <span style="padding: 5px">日同比 11%</span><span style="color: green"><a-icon type="caret-down" /></span>
                </a-card>
            </a-col>
        </a-row>
        <!-- 四个小卡片结束 -->

        <!-- tab切换开始 -->
        <div style="background: #fff">
            <!-- tab切换功能 -->
            <div style="width: 100%; min-height: 400px; margin-top: 20px;">
                <a-tabs>
                    <!-- 销售额内容 -->
                    <a-tab-pane key="1" tab="销售额">
                        <div>
                            <!-- 左侧图片 -->
                            <div
                                style="width: 70%; min-height: 200px; float: left; padding: 10px;margin-right: 50px; padding: 10px">
                                <h4 style="margin-left: 10px">销售额排行</h4>
                                <!-- 柱状统计图部分 -->
                                <div id="rank1" style="width: 700px; height: 300px;">

                                </div>
                            </div>
                            <!-- 右侧排行榜 -->
                            <div style="width: 20%; min-height: 250px;float: left; padding: 10px;">
                                <h4 style="margin-bottom: 20px">门店销售排行榜</h4>
                                <ul>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">1</span>
                                        <span style="margin-right: 8px">白鹭岛1号店</span>
                                        <span>1234.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">2</span>
                                        <span style="margin-right: 8px">白鹭岛2号店</span>
                                        <span>1134.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">3</span>
                                        <span style="margin-right: 8px">白鹭岛3号店</span>
                                        <span>1034.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">4</span>
                                        <span style="margin-right: 8px">白鹭岛4号店</span>
                                        <span>934.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">5</span>
                                        <span style="margin-right: 8px">白鹭岛5号店</span>
                                        <span>834.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">6</span>
                                        <span style="margin-right: 8px">白鹭岛6号店</span>
                                        <span>734.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px;">7</span>
                                        <span style="margin-right: 8px">白鹭岛7号店</span>
                                        <span>634.56</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </a-tab-pane>
                    <!-- 销售趋势内容 -->
                    <a-tab-pane key="2" tab="销售趋势内容">
                        <div>
                            <!-- 左侧图片 -->
                            <div
                                style="width: 70%; min-height: 200px; float: left; padding: 10px;margin-right: 50px; padding: 10px">
                                <h4 style="margin-left: 10px">销售额排行</h4>
                                <!-- 柱状统计图部分 -->
                                <div id="rank1" ref="chart" style="width: 700px; height: 300px;">

                                </div>
                                <!-- <InfoView/> -->
                            </div>
                            <!-- 右侧排行榜 -->
                            <div style="width: 20%; min-height: 250px;float: left; padding: 10px;">
                                <h4 style="margin-bottom: 20px">门店销售排行榜</h4>
                                <ul>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">1</span>
                                        <span style="margin-right: 8px">白鹭岛1号店</span>
                                        <span>1234.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">2</span>
                                        <span style="margin-right: 8px">白鹭岛2号店</span>
                                        <span>1134.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">3</span>
                                        <span style="margin-right: 8px">白鹭岛3号店</span>
                                        <span>1034.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">4</span>
                                        <span style="margin-right: 8px">白鹭岛4号店</span>
                                        <span>934.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">5</span>
                                        <span style="margin-right: 8px">白鹭岛5号店</span>
                                        <span>834.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px">6</span>
                                        <span style="margin-right: 8px">白鹭岛6号店</span>
                                        <span>734.56</span>
                                    </li>
                                    <li>
                                        <span class="point" style="margin-bottom: 15px;">7</span>
                                        <span style="margin-right: 8px">白鹭岛7号店</span>
                                        <span>634.56</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </a-tab-pane>
                    <a-button slot="tabBarExtraContent">
                        Extra Action
                    </a-button>
                </a-tabs>

            </div>

        </div>
        <!-- tab切换结束 -->

        <!-- 最近一周访问统计开始 -->
        <div style="width: 100%; min-height: 400px; margin-top: 20px; background: #fff; padding: 10px;">
            <div style="margin-left: 10px; margin-top: 10px;">
                <span>最近一周访问量</span>
            </div>
            <a-divider />
            <ul style="display:flex; justify-content: space-around;">
                <li style="float: left; text-align: center;">
                    <p>今日ip
                        <a-icon type="environment" theme="twoTone" />
                    </p>
                    <span></span>
                    <p>5</p>

                </li>
                <li style="float: left; text-align: center;">
                    <p>今日访问
                        <a-icon type="eye" theme="twoTone" />
                    </p>
                    <p>190</p>
                </li>
                <li style="float: left; text-align: center;">
                    <p>总访问量
                        <a-icon type="rocket" theme="twoTone" />
                    </p>
                    <p>190</p>
                </li>
            </ul>
            <!-- 访问统计图 -->
            <div id="visit" ref="chart" style="height: 300px; width: 1000px">

            </div>
        </div>
        <!-- 最近一周访问统计结束 -->
</div>
</template>

<script>

import * as echarts from 'echarts';
// import InfoView from '@/components/InfoView.vue';
export default {
    name: 'ShouYeView',
    data() {
        return {

        }
    },
    updated() {
        this.visit()
        this.tabtwo()
    },

    mounted() {
        this.hh()
        this.pay()
        this.tab()
        this.tabtwo()
        this.visit()
        this.init()
    },
    methods: {
        // tab切换用到的方法
        callback(key) {
            console.log(key);
        },
        // 订单量
        hh() {
            var order = echarts.init(document.getElementById('order'));
            order.setOption({
                grid: {
                    left: "0px",
                    top: "0px",
                    right: "0px",
                    bottom: "0px"
                },
                xAxis: {
                    type: 'category',
                    data: ['00:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '13:00', '14:00', '15:00', '8:00', '10:00', '12:00', '13:00'],
                    show: false,
                },
                yAxis: {
                    show: false
                },
                series: [{
                    name: 'cpu',
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    data: ['31', '23', '65', '87', '87', '343', '343', '33', '55', '77', '87', '87', '343',],
                    areaStyle: {
                        // normal: {
                        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        //         offset: 0,
                        //         color: '#1890FF' // 0% 处的颜色
                        //     }, {
                        //         offset: 1,
                        //         color: '#1890FF' // 100% 处的颜色
                        //     }], false)
                        // }
                    },
                    itemStyle: {
                        // normal: {
                        //     color: '#1890FF'
                        // }
                    },
                    lineStyle: {
                        // normal: {
                        //     width: 0
                        // }
                    }
                }]
            })
        },
        // 支付笔数
        pay() {
            var chartDom = document.getElementById('pay');
            var myChart = echarts.init(chartDom);
            myChart.setOption({
                grid: {
                    left: "0px",
                    top: "0px",
                    right: "0px",
                    bottom: "0px"
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: false,
                        backgroundStyle: {
                            color: '#1890FF'
                        }
                    }
                ]
            })
        },
        // tab切换柱形统计图
        tab() {
            var chartDom = document.getElementById('rank1');
            var myChart = echarts.init(chartDom);
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: [
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [230, 210, 750, 850, 600, 710, 530, 630, 450, 600, 233, 400],
                        type: 'bar',
                        showBackground: false,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            })
        },
        tabtwo() {
            var chartDom = document.getElementById('rank1');
            var myChart = echarts.init(chartDom);
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: [
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [230, 210, 750, 850, 600, 710, 530, 630, 450, 600, 233, 400],
                        type: 'bar',
                        showBackground: false,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            }
            )
        },
        
        init() {
            this.$nextTick(() => {
                this.visit()
                this.tabtwo()
            })
        },

        visit() {
            var chartDom = document.getElementById('visit');
            var myChart  = echarts.init(chartDom);
            myChart .setOption({
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['02-11', '02-12', '02-13', '02-14', '02-15', '02-16', '02-17']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                series: [
                    {
                        name: 'ip',
                        type: 'line',
                        data: [100, 110, 130, 110, 120, 120, 90],
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: 'visit',
                        type: 'line',
                        data: [140, 40, 80, 50, 30, 70, 60],
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: 'Avg' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: 'Max'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    }
                ]
            })
        }
        
    },
    components: {
        // InfoView
    }
}
</script>

<style>
* {
    list-style: none;
}

/* 排行榜序号 */
.point {
    background: #314659;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}
</style>
